<script setup lang="ts">
import { computed, ref, nextTick, provide } from 'vue'
import { useAppStore } from '@/store/modules/app'
import { ConfigGlobal } from '@/components/ConfigGlobal'
import { isDark } from '@/utils/is'
import { useDesign } from '@/hooks/web/useDesign'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('app')

const appStore = useAppStore()

const currentSize = computed(() => appStore.getCurrentSize)

const greyMode = computed(() => appStore.getGreyMode)
const isRouterAlive = ref(true)
const reload = () => {
  isRouterAlive.value = false
  nextTick(() => {
    isRouterAlive.value = true
  })
}
// 根据浏览器当前主题设置系统主题色
const setDefaultTheme = () => {
  const isDarkTheme = isDark()
  appStore.setIsDark(isDarkTheme)
}
provide('reload', reload)
setDefaultTheme()
</script>

<template>
  <ConfigGlobal :size="currentSize">
    <RouterView v-if="isRouterAlive" :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
  </ConfigGlobal>
</template>

<style lang="less">
@prefix-cls: ~'@{namespace}-app';

.size {
  width: 100%;
  height: 100%;
}

html,
body {
  padding: 0 !important;
  margin: 0;

  // overflow: hidden;//隐藏
  .size;

  #app {
    .size;
  }
}

.@{prefix-cls}-grey-mode {
  filter: grayscale(100%);
}
//全局去掉输入框后面加减按钮
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type='number'] {
  -moz-appearance: textfield;
}
//修改
.el-form-item--default .el-form-item__label {
  line-height: 15px !important;
  font-size: 12px !important;
  letter-spacing: normal;
}
.el-form-item__label {
  display: flex !important;
  flex-direction: row !important;
  align-content: center !important;
  align-items: center !important;
  text-align: justify !important;
  height: 30px !important;
}
.el-form-item__label::before {
  height: 10px !important;
}

// #label .el-form-item--default .el-form-item__label {
//   line-height: 15px;
// }
// :deep(input::-webkit-outer-spin-button),
// :deep(input::-webkit-inner-spin-button) {
//   -webkit-appearance: none;
// }
// :deep(input[type='number']) {
//   -moz-appearance: textfield;
// }

// :deep(inpit) {
//   border: none;
// }
// 修改每个form-item底部高度----------
.el-form-item {
  margin-bottom: 6px !important;
  //margin-top: 1px !important;
}

.el-collapse-item__header {
  height: 30px !important;
  font-size: 14px !important;
}
.el-collapse-item__content {
  padding-bottom: 5px !important;
}
.el-card__body {
  //padding-left: 5px !important;
  padding: 5px 10px !important;
}
.el-form-item__error {
  height: 10px !important;
  position: static !important; //清除定位
}
.el-input-group__append {
  height: 28px !important;
}
.el-input-group__prepend {
  height: 28px !important;
}
// .el-collapse-item__wrap {
//   margin-top: 10px;
// }

//------------
//.el-collapse-item__wrap {
// padding-top: 1px !important;
// margin-top: 5px !important;
//}
// 教程文本换行
.introjs-tooltiptext {
  white-space: pre-line;
}

// input框长度100% 后续请通过嵌套栅格来调整长度
.el-input {
  width: 100%;

  .el-input__wrapper {
    width: 100%;
    height: 28px;

    &.is-disabled .el-input__inner {
      color: black !important;
    }
    .el-input__inner {
      width: 100%;
    }
  }
}
.el-select {
  width: 100%;
  .el-input__inner {
    width: 100%;
  }
}
.el-cascader {
  width: 100%;
}
.el-date-editor {
  width: 100% !important;
}
// 表单验证错误提示不换行
.el-form-item__error {
  white-space: nowrap;
}
// 表格上方按钮居右
#topBtn {
  display: flex;
  align-content: center;
  justify-content: flex-end;
  margin: 5px 0;
}
// 表格上方按鈕居右（按鈕按重要性從右到左排列）
#topBtnRight {
  float: right;
  flex-direction: row-reverse;
  margin: 5px 0;
}
#topBtnRight .el-button {
  margin-left: 5px;
}
// 输入框字数限制样式
.el-input .el-input__count .el-input__count-inner {
  letter-spacing: initial;
}
.el-textarea .el-input__count {
  letter-spacing: initial;
}

//组件label文字左对齐
// .el-form-item__label {
//   text-align: justify !important;
//   height: 30px !important;
// }
//
.el-radio-group .el-radio__label {
  font-size: 12px;
}
.el-checkbox-group .el-checkbox__label {
  font-size: 12px;
}
.el-input-group__append {
  font-size: 12px;
}
</style>
